<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>职业指导微课堂</title>
	<link rel="stylesheet" href="../styles/css/common.css">

	<style>
		.wktDetail .content {
			width: 1200px;
			background: #ffffff;
			margin: 20px auto;
			padding: 10px 100px;
			box-sizing: border-box;
		}


		.wktDetail .content .gsName {
			font-size: 24px;
			font-weight: bold;
			color: #6c6c6c;
			text-align: center;
			margin: 20px 0;
			text-indent: 0;
		}

		.wktDetail .content p {
			margin: 10px 0;
			color: #818181;
			line-height: 2;
			text-indent: 2em;
			font-size: 18px;
		}

		.audiocon {
			width: 1200px;
			background: #ffffff;
			margin: 0 auto;
			margin-top: 20px;
			padding: 20px 10px;
			box-sizing: border-box;
			display: none;
		}

		.audiocon span {
			line-height: 30px;
			margin-right: 10px;
		}

		.audioSty {
			width: 400px;
			height: 30px;
		}

		/* audio::-webkit-media-controls {
			overflow: hidden !important
		}

		audio::-webkit-media-controls-enclosure {
			width: calc(100% + 40px);
			margin-left: auto;
		}

		audio {
			border-radius: 50px;
		} */
	</style>
</head>

<body>
	<div class="wktDetail">
		<!-- 公共顶部 -->
		<script src="http://rsj.beijing.gov.cn/header.js"></script>
		<!-- 头部 -->
		<div class="job_header" style="margin-bottom:0">
			<div class="job_header_con clearfix">
				<a href="../index.html" class="left">
					<img src="../styles/images/logo.png" alt="">
				</a>
			</div>
		</div>
		<div class="audiocon clearfix">
			<span class="left">相关音频：</span>
			<audio controls="controls" tab="0" class="audioSty left">
				<source class="source1" src='' />
				您的浏览器暂不支持
			</audio>
		</div>
		<div class="content" id="J_area">
			<script type="text/html" id="J_item">
				<%if(+data.executeResult == 1){%>
					<% var _data = data.wktxx%>
					<p class="gsName"><%=_data.wktmc%></p>
					<%if(_data.sfwz == '1'){%>
						<p><%=#render_br(_data.wbnr)%></p>
					<%}%>
					<%if(_data.zylx == '02'){%>
						<video controls="controls" width="960" height="540" style="display: block;margin: 0 auto;">
							<source class="source1" src='<%=_data.ypdz%>'/>
								您的浏览器暂不支持
						</video>
					<%}%>
				<%}%>
			</script>
		</div>

		<!-- 公共尾部 -->
		<script src="http://rsj.beijing.gov.cn/footer.js"></script>
	</div>
</body>
<script src="../common/vendor.js"></script>
<script src="../common/common.js"></script>
<script>
	$(function () {
		var wktid = $.paramObj().wktid;
		$.asyncRender({
			url: '/zyjp/getwktxx',
			type: 'get',
			data: {
				wktid: wktid
			},
			wrap: '#J_area',
			tem: '#J_item',
			pos: 'returnData',
		}).done(function (res) {
			var _res = res.returnData;
			if (+_res.executeResult === 1) {
				if(_res.wktxx.zylx == '01'){
					$('.audiocon').show();
					$('.audioSty .source1').attr('src', _res.wktxx.ypdz);
					$('.audioSty')[0].load();
				}
			} else {
				$.layerMsg(_res.message, '我知道了');
			}
		})
		template.helper('render_br', function (str, flag) {
			if (flag) {
				var _str = str.replace(/\|BKSX\|/g, '<br>');
			} else {
				var _str = str.replace(/\|BKSX\|/g, '<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
			}
			return _str
		});
	});
</script>

</html>
